new Vue({
    el: "#app",
    data: {
      todos: [
        { text: "Learn JavaScript", done: false },
        { text: "Learn Vue", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    },
    methods: {
        toggle: function(todo){
          todo.done = !todo.done
      }
    }
  })

  new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a)
    }
  })

  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    computed: {
      // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      },
      now: function () {
        return Date.now()
      }

    },
    methods: {
      mnow: function () {
        return new Date();
      }
    }
  });


  new Vue({
    el: '#no-key-example',
    data: {
      loginType: 'username'
    },
    methods: {
      toggleLoginType: function () {
        return this.loginType = this.loginType === 'username' ? 'email' : 'username'
      }
    }
  })



  Vue.component('todo-item', {
    template: '\
      <li>\
        {{ title }}\
        <button v-on:click="$emit(\'remove\')">Remove</button>\
      </li>\
    ',
    props: ['title']
  })
  

  var todovm = new Vue({
    el: '#todo-list-example',
    data: {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes',
        },
        {
          id: 2,
          title: 'Take out the trash',
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      nextTodoId: 4
    },
    methods: {
      addNewTodo: function () {
        this.todos.push({
          id: this.nextTodoId++,
          title: this.newTodoText
        })
        this.newTodoText = ''
      }
    }
  })



  Vue.component('blog-post', {
    props: ['post'],
    template: '\
      <div class="blog-post">\
        <h3>{{ post.title }}</h3>\
        <button v-on:click="$emit(\'enlarge-text\', 0.1)">\
          Enlarge text\
        </button>\
        <div v-html="post.content"></div>\
      </div>\
    '
  })
  new Vue({
    el: '#blog-posts-events-demo',
    data: {
      posts: [
        { id: 1, title: 'My journey with Vue', content: '...content...' },
        { id: 2, title: 'Blogging with Vue', content: '...content...' },
        { id: 3, title: 'Why Vue is so fun', content: '...content...' }
      ],
      postFontSize: 1
    },
    methods: {
      onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount
      }
    }
  })